import { Badge, Card, Descriptions, Divider, Table } from 'antd';
import React, { Component } from 'react';
import numeral from 'numeral';
import moment from 'moment';
import Zmage from 'react-zmage';
import { employeeStateArray, socialTraineeStateArray } from '@/utils/constant';

class MyComponent extends Component {
  render() {
    const {
      info,
      showOrder = true,
      showPerson = true,
      showProduct = true,
      showTransfer = true,
      showProtocol = true,
    } = this.props;
    return (
      <Card bordered={false} className="order-info-card">
        {showOrder && (
          <>
            <Descriptions
              title="订单信息"
              style={{
                marginBottom: 32,
              }}
            >
              <Descriptions.Item label="订单号">{info.id}</Descriptions.Item>
            </Descriptions>
            <Divider
              style={{
                marginBottom: 32,
              }}
            />
          </>
        )}
        {showPerson && (
          <>
            <Descriptions
              title="用户信息"
              style={{
                marginBottom: 32,
              }}
            >
              <Descriptions.Item label="用户名称">{info.name}</Descriptions.Item>
              <Descriptions.Item label="公司部门">{info.department}</Descriptions.Item>
              <Descriptions.Item label="岗位名称">{info.position}</Descriptions.Item>
              <Descriptions.Item label="手机号码">{info.mobile}</Descriptions.Item>
            </Descriptions>
            <Divider
              style={{
                marginBottom: 32,
              }}
            />
          </>
        )}
        {showProduct && (
          <>
            <Descriptions
              title="产品信息"
              style={{
                marginBottom: 32,
              }}
            >
              <Descriptions.Item label="产品名称">{info.title}</Descriptions.Item>
              <Descriptions.Item label="认购金额">
                {numeral(info.totalAmount).format('0,0')} 元
              </Descriptions.Item>
              <Descriptions.Item label="审批金额">
                {numeral(info.auditAmount).format('0,0')} 元
              </Descriptions.Item>
              <Descriptions.Item label="是否集团担保">
                {info.rateSkuEntity && guaranteeArray[info.rateSkuEntity.isGuarantee]}
              </Descriptions.Item>
              <Descriptions.Item label="预期年化利率">
                {info.rateSkuEntity && numeral(info.rateSkuEntity.rateYear).format('0.00%')}
              </Descriptions.Item>
              <Descriptions.Item label="购买期限">
                {info.rateSkuEntity && info.rateSkuEntity.name}
              </Descriptions.Item>
              <Descriptions.Item label="计息时间">
                {info.beginEarningsTime && moment(info.beginEarningsTime).format('YYYY-MM-DD')}
              </Descriptions.Item>
              <Descriptions.Item label="预期利息">
                {numeral(info.expEarnings).format('0,0')} 元
              </Descriptions.Item>
              <Descriptions.Item label="预期本息">
                {numeral(info.totalEarnings).format('0,0')} 元
              </Descriptions.Item>
              <Descriptions.Item label="当前天数">{info.earningsDays}</Descriptions.Item>
              <Descriptions.Item label="当前利息">
                {numeral(info.presentEarnings).format('0,0')} 元
              </Descriptions.Item>
              <Descriptions.Item label="当前本息">
                {numeral(info.presentEarnings + info.auditAmount).format('0,0')} 元
              </Descriptions.Item>
            </Descriptions>
            <Divider
              style={{
                marginBottom: 32,
              }}
            />
          </>
        )}
        {showProtocol && info.realName && (
          <>
            <Descriptions
              title="汇款信息"
              style={{
                marginBottom: 32,
              }}
            >
              <Descriptions.Item label="汇款姓名">{info.realName}</Descriptions.Item>
              <Descriptions.Item label="汇款银行">{info.payBank}</Descriptions.Item>
              <Descriptions.Item label="支行名称">{info.bankBranch}</Descriptions.Item>
              <Descriptions.Item label="汇款卡号">{info.payCard}</Descriptions.Item>
              <Descriptions.Item label="汇款时间">
                {moment(info.payTime).format('YYYY-MM-DD')}
              </Descriptions.Item>
              <Descriptions.Item label="支付流水号">{info.paySerialNumber}</Descriptions.Item>
              <Descriptions.Item label="备注">{info.remark}</Descriptions.Item>
              <Descriptions.Item label=""></Descriptions.Item>
              <Descriptions.Item label=""></Descriptions.Item>
              <Descriptions.Item label="汇款照片">
                {info.payImgUrlList &&
                  info.payImgUrlList.map((item, index) => {
                    return <Zmage height={100} key={index} src={item} />;
                  })}
              </Descriptions.Item>
            </Descriptions>
            <Divider
              style={{
                marginBottom: 32,
              }}
            />
          </>
        )}
        {showTransfer && info.contractList && info.contractList.length > 0 && (
          <>
            <Descriptions
              title="协议信息"
              style={{
                marginBottom: 32,
              }}
            >
              {info.contractList.map((item, index) => {
                return (
                  <div>
                    <a href={item.contractOssUrl} target="_blank">
                      {item.contractId}
                    </a>
                  </div>
                );
              })}
            </Descriptions>
            <Divider
              style={{
                marginBottom: 32,
              }}
            />
          </>
        )}
      </Card>
    );
  }
}

export default MyComponent;
